<script type="text/x-template" id="mediaitem-artwork">
    <div class="mediaitem-artwork" :class="[{'rounded': (type == 'artists')}, classes]" :key="url"
         v-observe-visibility="{callback: visibilityChanged}">
        <img :src="getMediaItemArtwork(url, size, width)"  :style="{ width: size + 'px'}"
             decoding="async" loading="lazy"
             class="mediaitem-artwork--img">
        <!-- <div v-if="video && isVisible && getVideoPriority()" class="animatedartwork-view-box">
            <animatedartwork-view :priority="getVideoPriority()" :video="video"></animatedartwork-view>
        </div> -->
    </div>
</script>

<script>
  Vue.component('mediaitem-artwork', {
    template: '#mediaitem-artwork',
    props: {
      size: {
        type: [String, Number],
        default: '120'
      },
      width: {
        type: [String, Number],
        required: false
      },
      url: {
        type: String,
        default: ''
      },
      type: {
        type: String,
        default: ''
      },
      video: {
        type: String,
        required: false
      },
      videoPriority: {
        type: Boolean,
        required: false
      },
      shadow: {
        type: String,
        default: ''
      }
    },
    data: function() {
      return {
        app: this.$root,
        isVisible: false,
        style: {
          "box-shadow": ""
        },
        classes: []
      }
    },
    mounted() {
      this.getClasses()
    },
    methods: {
      getVideoPriority() {
        return false
      },
      getClasses() {
        switch (this.shadow) {
          case "none":
            this.classes.push("no-shadow")
            break;
          case "large":
            this.classes.push("shadow")
            break;
          case "subtle":
            this.classes.push("subtle-shadow")
            break;
          default:
            break;
        }
        return this.classes;
      },
      getArtworkStyle() {
        return {
          width: this.size + 'px',
          height: this.size + 'px'
        };
      },
      visibilityChanged: function(isVisible, entry) {
        this.isVisible = isVisible
      },
      getMediaItemArtwork(url, height = 64, width) {
        try{
        if (typeof url == "undefined" || url == "") {
          return "./assets/MissingArtwork.svg"
        }
        height = parseInt(height * window.devicePixelRatio)
        if (width) {
          width = parseInt(width * window.devicePixelRatio)
        }
        let newurl = `${url.replace('{w}', width ?? height).replace('{h}', height).replace('{f}', "webp").replace('{c}', ((width === 900) ? "sr" : "cc"))}`;

        if (newurl.includes("900x516")) {
          newurl = newurl.replace("900x516cc", "900x516sr").replace("900x516bb", "900x516sr");
        }
        return newurl} catch (e){
          return "./assets/MissingArtwork.svg"
        }
      },
    }
  });
</script>
